<template>
  <div class="man">
    <div class="handle">
      <div class="menu">
        <el-timeline>
          <el-timeline-item placement="top">
            <el-card>
              <h4>添加教师</h4>
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="工号" prop="teano">
                  <el-input v-model="ruleForm.teano"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="teaname">
                  <el-input v-model="ruleForm.teaname" placeholder="请输入姓名"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="teasex">
                  <el-select v-model="ruleForm.teasex" placeholder="请选择性别">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="账号密码" prop="passwd">
                  <el-input v-model="ruleForm.passwd" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="电话" prop="teatel">
                  <el-input v-model="ruleForm.teatel" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="单位" prop="dept">
                  <el-select v-model="ruleForm.dept" filterable placeholder="请选择(可搜索)">
                    <el-option
                      v-for="item in options"
                      :key="item.dept"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="银行卡" prop="cashcardid">
                  <el-input v-model="ruleForm.cashcardid" placeholder="请输入银行卡号"></el-input>
                </el-form-item>
                <el-form-item label="家庭地址" prop="teaadd">
                  <!-- <el-input v-model="ruleForm.teaadd" placeholder="请输入家庭地址"></el-input> -->
                  <el-select v-model="ruleForm.teaadd" placeholder="请选择活动区域">
                    <el-option label="本部" value="本部"></el-option>
                    <el-option label="本部附近" value="本部附近"></el-option>
                    <el-option label="南区" value="南区"></el-option>
                    <el-option label="南区附近" value="南区附近"></el-option>
                    <el-option label="北区" value="北区"></el-option>
                    <el-option label="北区附近" value="北区附近"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import "@/mock/Admin";
import Message from "@/plugins/message";
import $ from "jquery";

export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      searchName: "",
      options: [
        {
          dept: "选项1",
          label: "信息科学与工程学院"
        },
        {
          dept: "选项2",
          label: "软件学院"
        },
        {
          dept: "选项3",
          label: "外国语学院"
        },
        {
          dept: "选项4",
          label: "数学学院"
        },
        {
          dept: "选项5",
          label: "物理学院"
        }
      ],
      ruleForm: {
        teano: "",
        teaname: "",
        passwd: "",
        teatel: "",
        teasex: "",
        dept: "",
        cashcardid: "",
        teaadd: ""
      },
      rules: {
        teano: [
          { required: true, message: "请输入工号", trigger: "blur" },
          { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" }
        ],
        teaname: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "长度为 2 到 4 个字符", trigger: "blur" }
        ],
        passwd: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 12, message: "长度为 6 到 12 个字符", trigger: "blur" }
        ],
        teasex: [{ required: true, message: "请选择性别", trigger: "change" }],
        teatel: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post("Admin/add", { adminInfo: this.ruleForm }).then(res => {
            const { code, msg } = res.data;
            if (code === 0) {
              Message.success(msg);
              this.$router.push("/member/index");
            } else {
              Message.error("添加失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style scoped>
.man {
  position: relative;
  /* border: 1px solid black; */
}
.man .handle  {
  /* position: absolute; */
  width: 560px;
  margin: 0 auto 20px;
}
</style>